<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<text class="label">身份证</text>
				<view class="file-upload">
					<!-- 上传身份证正面 -->
					<view class="upload-btn" @click="uploadFrontImage">
						<!-- 当没有上传图片时，显示默认提示图 -->
						<view v-if="!frontImage" class="upload-icon-wrapper">
							<view class="upload-icon1"></view>
							<text class="upload-text">上传身份证正面</text>
						</view>
						<!-- 当上传图片时，显示上传的图片 -->
						<view class="upload-btn uploaded" v-else>
							<image :src="frontImage" class="upload-icon" />
							<view class="close-btn" @click.stop="removeFrontImage">×</view>
						</view>
					</view>
					<!-- 上传身份证背面 -->
					<view class="upload-btn" @click="uploadBackImage">
						<!-- 当没有上传图片时，显示默认提示图 -->
						<view v-if="!backImage" class="upload-icon-wrapper">
							<view class="upload-icon2"></view>
							<text class="upload-text">上传身份证背面</text>
						</view>
						<!-- 当上传图片时，显示上传的图片 -->
						<view class="upload-btn uploaded" v-else>
							<image :src="backImage" class="upload-icon" />
							<view class="close-btn" @click.stop="removeBackImage">×</view>
						</view>
					</view>
				</view>
			</view>
			<button class="submit-btn" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import "@/config/request.js";
	import {
		http
	} from "@/config/request.js";
	import {
		useTokenStore
	} from "@/stores/jwt.js";
	import {
		useuser
	} from "@/stores/user.js";
	// 使用 ref 存储上传的图片路径
	const frontImage = ref(null);
	const backImage = ref(null);
	const token = useTokenStore().jwt;
	const duixiang = ref({});
	const user = useuser();
	// 上传身份证正面图片
	const uploadFrontImage = () => {

		console.log(token);
		wx.chooseImage({
			count: 1,
			success(res) {
				frontImage.value = res.tempFilePaths[0];
				console.log("上传身份证正面图", res);
				uni.uploadFile({
					url: 'http://localhost:9988/driverRealname/update', //仅为示例，非真实的接口地址
					filePath: frontImage.value,
					name: 'file',
					header: {
						'Authorization': `${token}` // 这里加入令牌（token）
					},
					success: (uploadFileRes) => {
						console.log("上传成功", uploadFileRes.data);
						const res = JSON.parse(uploadFileRes.data);
						if (res.code === 20031) {
							duixiang.value.name = res.shuju.name;
							duixiang.value.idcard = res.shuju.idcard;
							duixiang.value.address = res.shuju.address;
							duixiang.value.imagez = res.shuju.imagez;
							frontImage.value = res.shuju.imagez;
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'error',
							});
						}
					}
				});
			}

		});
	}
	// 上传身份证背面图片
	const uploadBackImage = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				backImage.value = res.tempFilePaths[0];
				console.log("上传身份证背面图", res);
				uni.uploadFile({
					url: 'http://localhost:9988/driverRealname/update', //仅为示例，非真实的接口地址
					filePath: backImage.value,
					name: 'file',
					header: {
						'Authorization': `${token}` // 这里加入令牌（token）
					},
					success: (uploadFileRes) => {
						console.log("上传成功", uploadFileRes.data);
						const res = JSON.parse(uploadFileRes.data);
						if (res.code === 20031) {
							duixiang.value.qianf = res.shuju.qianf;
							duixiang.value.expiration = res.shuju.expiration;
							duixiang.value.endtime = res.shuju.endtime;
							duixiang.value.imagef = res.shuju.imagef;
							backImage.value = res.shuju.imagef;
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'error',
							});
						}
					}
				});
			}
		});
	};

	// 提交表单
	const submitForm = () => {
		console.log("像后端提交")
		console.log(user.user.did)
		console.log(duixiang.value)
		duixiang.value.did = user.user.id
		submit()
	};
	const submit = async () => {
		const res = await http({
			url: '/driverRealname/add',
			method: 'post',
			data: duixiang.value
		})
		console.log(res)
		if (res.code = 20011) {
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: '提交失败',
				icon: 'error'
			})
		}
	}
	// 删除身份证正面图
	const removeFrontImage = () => {
		frontImage.value = null;
		console.log(user.user.id)
	};

	// 删除身份证背面图
	const removeBackImage = () => {
		backImage.value = null;
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background-color: #eee;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
	}

	.form {
		padding-top: 30rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
		height: 300rpx;
		width: 700rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.label {
		font-size: 30rpx;
		color: #333;
		display: inline-block;
		margin-top: 20rpx;
		margin-left: 25rpx;
	}

	.file-upload {
		display: flex;
		justify-content: space-around;
	}

	.upload-btn {
		margin: 20rpx;
		width: 43%;
		height: 180rpx;
		background-color: #f1f1f1;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.upload-icon-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.upload-text {
		font-size: 24rpx;
		color: #868686;

	}

	.upload-icon {
		width: 300rpx;
		height: 300rpx;
		background-size: cover;
		/* 保证图片完全覆盖框，并保持长宽比 */
		border-radius: 10rpx;
	}

	.upload-icon1 {
		width: 130rpx;
		height: 80rpx;
		background-image: url('../../../static/shenfenzheng/zhengmian.png');
		background-size: 130rpx 80rpx;
		background-repeat: no-repeat;
		/* 保证图片完全覆盖框，并保持长宽比 */
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}

	.upload-icon2 {
		width: 130rpx;
		height: 80rpx;
		background-image: url('../../../static/shenfenzheng/fanmian.png');
		background-size: 130rpx 80rpx;
		background-repeat: no-repeat;
		/* 保证图片完全覆盖框，并保持长宽比 */
		border-radius: 10rpx;
	}

	.submit-btn {
		width: 700rpx;
		height: 80rpx;
		background-color: #1E62B8;
		color: white;
		border-radius: 10rpx;
		font-size: 32rpx;
		margin-top: 20rpx;
	}

	.uploaded {
		position: relative;
	}

	.close-btn {
		position: absolute;
		top: 5rpx;
		right: -60rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 28rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}
</style>